<template>
  <div class="tabBar">
    <TabBarItem
      v-for="(item, index) in tabBars"
      :key="index"
      :className="item.className"
      :title="item.title"
      :path="item.path"
      :class="selectIndex == index ? 'select' : 'normal'"
      @changeIndex="changeIndex(index)"
    ></TabBarItem>
  </div>
</template>

<script>
// 导入TabBarItem.vue
import TabBarItem from "@/components/TabBarItem.vue"
export default {
  name: "TabBar",
  data: function() {
    return {};
  },
  computed: {
    selectIndex(){
      return this.$store.state.tab.tabIndex;
    }
  },
  props: ["tabBars"],
  methods: {
    changeIndex(index) {
      this.$store.commit('changeTabIndex',index);
      this.$store.commit('changeTitle',this.tabBars[index].title);
    }
  },
  components:{
    TabBarItem
  },
};
</script>

<style scoped lang="less">
.tabBar {
  width: 100%;
  height: 48px; /*no*/
  background-color: #f4f4f4;
  position: fixed;
  left: 0;
  bottom: 0;
  border: 1px solid #f4f4f4; /*px*/
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  align-items: center;
}
</style>
